<template>
  <el-scrollbar>
    <el-menu
      :collapse="isCollapse"
      :collapse-transition="false"
      :default-active="active"
      :background-color="theme.background"
      :active-text-color="theme.active"
      class="el-menu-vertical"
      unique-opened
      @select="selectMenuItem"
    >
      <template v-for="item in routerStore.routes[0].children">
        <aside-component
          v-if="!item.hidden"
          :key="item.name"
          :is-collapse="isCollapse"
          :router-info="item"
          :theme="theme"
        />
      </template>
    </el-menu>
  </el-scrollbar>
</template>

<script>
export default {
  name: 'Aside',
}
</script>

<script setup>
import AsideComponent from '@/views/hall/aside/asideComponent/index.vue'
import { emitter } from '@/utils/bus.js'
import { ref, watch, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user'
import { useHallRouterStore } from '@/store/modules/hallRouter'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const routerStore = useHallRouterStore()

const theme = ref({})

const getTheme = () => {
  switch (userStore.sideMode) {
    case 'light':
      theme.value = {
        background: '#fff',
        activeBackground: '#4D70FF',
        activeText: '#fff',
        normalText: '#333',
        hoverBackground: 'rgba(64, 158, 255, 0.08)',
        hoverText: '#333',
      }
      break
    case 'dark':
      theme.value = {
        background: '#191a23',
        activeBackground: '#4D70FF',
        activeText: '#fff',
        normalText: '#fff',
        hoverBackground: 'rgba(64, 158, 255, 0.08)',
        hoverText: '#fff',
      }
      break
  }
}

getTheme()


const isCollapse = ref(false)
const isMobile = ref(false)
const active = ref('')
watch(() => route, () => {
  active.value = route.name
}, { deep: true })

const initPage = () => {
  active.value = route.name
  const screenWidth = document.body.clientWidth
  if (screenWidth < 1000) {
    isCollapse.value = !isCollapse.value
  }

  emitter.on('mobile', (item) => {
    isMobile.value = item
    if(item){
      isCollapse.value = false
    }
  })

  emitter.on('collapse', (item) => {
    if(isMobile.value){
      isCollapse.value = false
    } else {
      isCollapse.value = item
    }
  })
}

initPage()

onUnmounted(() => {
  emitter.off('collapse')
})

const selectMenuItem = (name, keyPath) => {
  const query = {}
  const params = {}
  routerStore.routeMap[name]?.parameters &&
      routerStore.routeMap[name]?.parameters.forEach((item) => {
        if (item.type === 'query') {
          query[item.key] = item.value
        } else {
          params[item.key] = item.value
        }
      })
  if (name === route.name) return
  if (name.indexOf('http://') > -1 || name.indexOf('https://') > -1) {
    window.open(name)
  } else {
    router.push({ name: name, query, params })
  }
  if(isMobile.value){
    emitter.emit('totalCollapse')
  }
}

</script>

<style lang="scss" scoped>
</style>

<style>
</style>